<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas绘制八卦图</title>
	</head>
	<body>
		<canvas id="canvas" width="600" height="600"></canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext('2d');
			var deg = 0;

			setInterval(function() {
				context.clearRect(0, 0, 600, 600);
				context.save();
				//在旋转之前，把画布的中心位置translate到图片的中心
				context.translate(250, 250);
				deg++;
				context.rotate(Math.PI / 180 * 1.5 * deg);
				//旋转之后，把中心translate回初始的位置，然后再绘制长方形
				context.translate(-250, -250);

				//1.最外层的空心圆
				context.beginPath();
				context.arc(250, 250, 200, 0, Math.PI * 2);
				context.stroke();

				

				//2.绘制半黑半白  默认为黑色
				context.beginPath();
					//开始的弧度
				context.arc(250, 250, 200, Math.PI * 3 / 2, Math.PI / 2, true);
				context.fill();

				//3.绘制一黑一白两个半圆
				context.fillStyle = "white";
				context.beginPath();
				context.arc(250, 150, 100, 0, Math.PI * 2);
				context.fill();

				context.fillStyle = "black";

				context.beginPath();
				context.arc(250, 350, 100, 0, Math.PI * 2);
				context.fill();

				//4.绘制两个小圆 一黑一白
				context.fillStyle = "black";
				context.beginPath();
				context.arc(250, 150, 30, 0, Math.PI * 2);
				context.fill();

				context.fillStyle = "white";
				context.beginPath();
				context.arc(250, 350, 30, 0, Math.PI * 2);
				context.fill();
				context.restore();
			}, 0.01)
			context.closePath();
		</script>
	</body>

</html>